<script lang="ts" setup>
import MyBox from '@/components/MyBox.vue'
import { ref, onMounted } from 'vue'

const currentStyle = ref(2)
const styleTotal = ref(3 * 10)

//设备个数
const deviceNum = ref(61)
const finalNum = ref(61)

//第一版
const rowList1 = ref<any[]>([])
const rowList2 = ref<any[]>([])
const specialList1 = ref([
  { UseStatus: '1', Status: 2, Number: 'T1' },
  { UseStatus: '1', Status: 2, Number: 'T2' }
])

//第二版
const rowList12 = ref<any[]>([])
const rowList22 = ref<any[]>([])
const specialList2 = ref<any[]>([])
//第三版
const rowList13 = ref<any[]>([])

const initDeviceMode = () => {
  rowList1.value = Array.from({ length: finalNum.value }, (item, index) => {
    return {
      UseStatus:
        index == 10 ||
        index == 11 ||
        index == 26 ||
        index == 27 ||
        index == 28 ||
        index == 29 ||
        index == 30 ||
        index == 54 ||
        index == 55 ||
        index == 56
          ? 2
          : 1,
      Status: index < 10 ? '6' : index > 10 && index < 61 ? 2 : 6,
      Number: index + 1
    }
  })
  rowList1.value[0].Status = 2
  rowList1.value[1].Status = 2
  rowList1.value[2].Status = 1
  rowList1.value[3].Status = 1
  rowList1.value[4].Status = 1
  rowList1.value[5].Status = 1
  rowList1.value[6].Status = 1
  rowList1.value[7].Status = 1
  rowList1.value[8].Status = 1
  rowList1.value[9].Status = 1
  rowList1.value[10].Status = 1
  rowList1.value[11].Status = 1

  rowList2.value = Array.from({ length: 120 - finalNum.value }, (item, index) => {
    return {
      UseStatus:
        index == 17 || index == 19 || index == 29 || index == 49 || index == 50 || index == 51
          ? 2
          : 1,
      Status: index == 1 || index == 2 || index == 3 || index == 4 ? 6 : 2,
      Number: index + (finalNum.value + 1)
    }
  })
  rowList12.value = Array.from({ length: finalNum.value }, (item, index) => {
    return {
      UseStatus: index == 31 || index == 32 || index == 33 || index == 34 ? 2 : 1,
      Status: index == 17 ? 6 : 2,
      Number: index + 1
    }
  })
  rowList22.value = Array.from({ length: 120 - finalNum.value - 1 }, (item, index) => {
    return {
      UseStatus: '1',
      Status: index == 7 ? 6 : 2,
      Number: index + (finalNum.value + 2)
    }
  })
  specialList2.value = [
    { UseStatus: '1', Status: 2, Number: 'T1' },
    { UseStatus: '1', Status: 2, Number: finalNum.value + 1 },
    { UseStatus: '1', Status: 2, Number: 'T2' }
  ]
  rowList13.value = Array.from({ length: finalNum.value }, (item, index) => {
    return {
      UseStatus: '1',
      Status: '6',
      Number: index + 1
    }
  })
}
onMounted(() => {
  initDeviceMode()
})
</script>
<template>
  <MyBox class="bad-count" title="设备状态">
    <template v-slot:main>
      <!-- 设备状态 -->
      <div class="mt-8 flex content-center items-center">
        <div class="flex items-center">
          <!-- <p class="mr-5">设备状态</p> -->
          <div class="flex gap-2 btn-box">
            <el-button>离线</el-button>
            <el-button class="my-btn">待机</el-button>
            <el-button type="success">运行</el-button>
            <el-button type="warning">急停</el-button>
            <el-button type="danger">故障</el-button>
          </div>
        </div>
        <div class="flex items-center cycle-box">
          <el-input-number class="mr-5" v-model="deviceNum" style="width: 120px" />
          <el-pagination
            class="my-pager mr-5"
            background
            layout="prev, pager, next"
            :total="styleTotal"
            v-model:currentPage="currentStyle"
          />
        </div>
      </div>
      <!-- 样式一 -->
      <div class="mt-7 style1 status-info" v-if="currentStyle === 1">
        <!-- 设备行列 -->
        <!-- 第一行数据 -->
        <div class="row flex flex-wrap justify-end">
          <div class="row-item text-center row-1" v-for="(item, index) in rowList1" :key="index">
            <!-- 0未启用 1启用 2托管 -->
            <template v-if="item.UseStatus == 1 || item.UseStatus == 3">
              <span v-if="item.Status == 1" class="status-yellow">{{ item.Number }}</span>
              <span v-else-if="item.Status == 2" class="status-green">{{ item.Number }}</span>
              <span v-else-if="item.Status == 3" class="status-red">{{ item.Number }}</span>
              <span v-else-if="item.Status == 4" class="status-orange">{{ item.Number }}</span>
              <span v-else-if="item.Status == 5" class="status-blue">{{ item.Number }}</span>
              <span v-else class="status-white">{{ item.Number }}</span>
            </template>
            <template v-else-if="item.UseStatus == 2">
              <span v-if="item.Status == 1" class="status-yellow status-charge">{{
                item.Number
              }}</span>
              <span v-else-if="item.Status == 2" class="status-green status-charge">{{
                item.Number
              }}</span>
              <span v-else-if="item.Status == 3" class="status-red status-charge">{{
                item.Number
              }}</span>
              <span v-else-if="item.Status == 4" class="status-orange status-charge">{{
                item.Number
              }}</span>
              <span v-else-if="item.Status == 5" class="status-blue status-charge">{{
                item.Number
              }}</span>
              <span v-else class="status-white status-charge">{{ item.Number }}</span>
            </template>
            <template v-else-if="item.UseStatus == 0">
              <span class="status-hide">{{ item.Number }}</span>
            </template>
            <template v-else>
              <span class="status-white">{{ item.Number }}</span>
            </template>
          </div>
        </div>
        <!-- 第二行数据 -->
        <div class="row flex flex-row-reverse">
          <div class="row-item text-center row-2" v-for="(item, index) in rowList2" :key="index">
            <!-- 0未启用 1启用 2托管 -->
            <template v-if="item.UseStatus == 1 || item.UseStatus == 3">
              <span v-if="item.Status == 1" class="status-yellow">{{ item.Number }}</span>
              <span v-else-if="item.Status == 2" class="status-green">{{ item.Number }}</span>
              <span v-else-if="item.Status == 3" class="status-red">{{ item.Number }}</span>
              <span v-else-if="item.Status == 4" class="status-orange">{{ item.Number }}</span>
              <span v-else-if="item.Status == 5" class="status-blue">{{ item.Number }}</span>
              <span v-else class="status-white">{{ item.Number }}</span>
            </template>
            <template v-else-if="item.UseStatus == 2">
              <span v-if="item.Status == 1" class="status-yellow status-charge">{{
                item.Number
              }}</span>
              <span v-else-if="item.Status == 2" class="status-green status-charge">{{
                item.Number
              }}</span>
              <span v-else-if="item.Status == 3" class="status-red status-charge">{{
                item.Number
              }}</span>
              <span v-else-if="item.Status == 4" class="status-orange status-charge">{{
                item.Number
              }}</span>
              <span v-else-if="item.Status == 5" class="status-blue status-charge">{{
                item.Number
              }}</span>
              <span v-else class="status-white status-charge">{{ item.Number }}</span>
            </template>
            <template v-else-if="item.UseStatus == 0">
              <span class="status-hide">{{ item.Number }}</span>
            </template>
            <template v-else>
              <span class="status-white">{{ item.Number }}</span>
            </template>
          </div>
        </div>
        <!-- T1 T2 -->
        <div class="row special-list">
          <div class="row-item text-center" v-for="(item, index) in specialList1" :key="index">
            <span v-if="item.Status == 1" class="status-yellow">{{ item.Number }}</span>
            <span v-else-if="item.Status == 2" class="status-green">{{ item.Number }}</span>
            <span v-else-if="item.Status == 3" class="status-red">{{ item.Number }}</span>
            <span v-else-if="item.Status == 4" class="status-orange">{{ item.Number }}</span>
            <span v-else-if="item.Status == 5" class="status-blue">{{ item.Number }}</span>
            <span v-else class="status-white">{{ item.Number }}</span>
          </div>
        </div>
      </div>
      <!-- 样式二 -->
  <div class="mt-7 style2 status-info" v-if="currentStyle === 2">
    <!-- 设备行列 -->
    <div class="row flex flex-wrap justify-end">
      <div
        class="row-item text-center row-1"
        v-for="(item, index) in rowList12"
        :key="index"
      >
        <!-- 0未启用 1启用 2托管 -->
        <template v-if="item.UseStatus == 1 || item.UseStatus == 3">
          <span v-if="item.Status == 1" class="status-yellow">{{
            item.Number
          }}</span>
          <span v-else-if="item.Status == 2" class="status-green">{{
            item.Number
          }}</span>
          <span v-else-if="item.Status == 3" class="status-red">{{
            item.Number
          }}</span>
          <span v-else-if="item.Status == 4" class="status-orange">{{
            item.Number
          }}</span>
          <span v-else-if="item.Status == 5" class="status-blue">{{
            item.Number
          }}</span>
          <span v-else class="status-white">{{ item.Number }}</span>
        </template>
        <template v-else-if="item.UseStatus == 2">
          <span v-if="item.Status == 1" class="status-yellow status-charge">{{
            item.Number
          }}</span>
          <span
            v-else-if="item.Status == 2"
            class="status-green status-charge"
            >{{ item.Number }}</span
          >
          <span v-else-if="item.Status == 3" class="status-red status-charge">{{
            item.Number
          }}</span>
          <span
            v-else-if="item.Status == 4"
            class="status-orange status-charge"
            >{{ item.Number }}</span
          >
          <span
            v-else-if="item.Status == 5"
            class="status-blue status-charge"
            >{{ item.Number }}</span
          >
          <span v-else class="status-white status-charge">{{
            item.Number
          }}</span>
        </template>
        <template v-else-if="item.UseStatus == 0">
          <span class="status-hide">{{ item.Number }}</span>
        </template>
        <template v-else>
          <span class="status-white">{{ item.Number }}</span>
        </template>
      </div>
    </div>
    <div class="row flex flex-row-reverse">
      <div
        class="row-item text-center row-2"
        v-for="(item, index) in rowList22"
        :key="index"
      >
        <!-- 0未启用 1启用 2托管 -->
        <template v-if="item.UseStatus == 1 || item.UseStatus == 3">
          <span v-if="item.Status == 1" class="status-yellow">{{
            item.Number
          }}</span>
          <span v-else-if="item.Status == 2" class="status-green">{{
            item.Number
          }}</span>
          <span v-else-if="item.Status == 3" class="status-red">{{
            item.Number
          }}</span>
          <span v-else-if="item.Status == 4" class="status-orange">{{
            item.Number
          }}</span>
          <span v-else-if="item.Status == 5" class="status-blue">{{
            item.Number
          }}</span>
          <span v-else class="status-white">{{ item.Number }}</span>
        </template>
        <template v-else-if="item.UseStatus == 2">
          <span v-if="item.Status == 1" class="status-yellow status-charge">{{
            item.Number
          }}</span>
          <span
            v-else-if="item.Status == 2"
            class="status-green status-charge"
            >{{ item.Number }}</span
          >
          <span v-else-if="item.Status == 3" class="status-red status-charge">{{
            item.Number
          }}</span>
          <span
            v-else-if="item.Status == 4"
            class="status-orange status-charge"
            >{{ item.Number }}</span
          >
          <span
            v-else-if="item.Status == 5"
            class="status-blue status-charge"
            >{{ item.Number }}</span
          >
          <span v-else class="status-white status-charge">{{
            item.Number
          }}</span>
        </template>
        <template v-else-if="item.UseStatus == 0">
          <span class="status-hide">{{ item.Number }}</span>
        </template>
        <template v-else>
          <span class="status-white">{{ item.Number }}</span>
        </template>
      </div>
    </div>
    <!-- T1 T2 -->
    <div class="row special-list">
      <div
        class="row-item text-center"
        v-for="(item, index) in specialList2"
        :key="index"
      >
        <span v-if="item.Status == 1" class="status-yellow">{{
          item.Number
        }}</span>
        <span v-else-if="item.Status == 2" class="status-green">{{
          item.Number
        }}</span>
        <span v-else-if="item.Status == 3" class="status-red">{{
          item.Number
        }}</span>
        <span v-else-if="item.Status == 4" class="status-orange">{{
          item.Number
        }}</span>
        <span v-else-if="item.Status == 5" class="status-blue">{{
          item.Number
        }}</span>
        <span v-else class="status-white">{{ item.Number }}</span>
      </div>
    </div>
  </div>
  <!-- 样式3 只有一行数据 -->
  <div class="mt-7 status-info" v-if="currentStyle === 3">
    <div class="row flex flex-wrap justify-end">
      <div
        class="row-item text-center row-1"
        v-for="(item, index) in rowList13"
        :key="index"
      >
        <!-- 0未启用 1启用 2托管 -->
        <template v-if="item.UseStatus == 1 || item.UseStatus == 3">
          <span v-if="item.Status == 1" class="status-yellow">{{
            item.Number
          }}</span>
          <span v-else-if="item.Status == 2" class="status-green">{{
            item.Number
          }}</span>
          <span v-else-if="item.Status == 3" class="status-red">{{
            item.Number
          }}</span>
          <span v-else-if="item.Status == 4" class="status-orange">{{
            item.Number
          }}</span>
          <span v-else-if="item.Status == 5" class="status-blue">{{
            item.Number
          }}</span>
          <span v-else class="status-white">{{ item.Number }}</span>
        </template>
        <template v-else-if="item.UseStatus == 2">
          <span v-if="item.Status == 1" class="status-yellow status-charge">{{
            item.Number
          }}</span>
          <span
            v-else-if="item.Status == 2"
            class="status-green status-charge"
            >{{ item.Number }}</span
          >
          <span v-else-if="item.Status == 3" class="status-red status-charge">{{
            item.Number
          }}</span>
          <span
            v-else-if="item.Status == 4"
            class="status-orange status-charge"
            >{{ item.Number }}</span
          >
          <span
            v-else-if="item.Status == 5"
            class="status-blue status-charge"
            >{{ item.Number }}</span
          >
          <span v-else class="status-white status-charge">{{
            item.Number
          }}</span>
        </template>
        <template v-else-if="item.UseStatus == 0">
          <span class="status-hide">{{ item.Number }}</span>
        </template>
        <template v-else>
          <span class="status-white">{{ item.Number }}</span>
        </template>
      </div>
    </div>
  </div>
    </template>
  </MyBox>
</template>
<style scoped lang="less">
.row-box-wrapper {
  padding: 30px 15px;
}
.bad-count {
  width: 100%;
}
.btn-box {
  :deep(.el-button) {
    font-size: 28px;
    height: 56px;
    padding: 8px 28px;
  }
}

.status-info {
  position: relative;
  height: 180px;
  margin-right: 50px;
  .row-2 {
    margin-top: 100px;
  }
}

.my-btn {
  background: #cece1d;
  color: #fff;
  border-color: #cece1d;
}
.row-item {
  --num: v-bind(finalNum);
  width: calc((1760px) / var(--num));
  // width: 30.5px;
  span {
    width: 100%;
    display: block;
    height: 40px;
    font-size: 1rem;
    line-height: 40px;
    border: 1px solid #f7f7f7;
  }
}
.special-list {
  position: absolute;
  right: -30px;
  top: 0;
  .row-item {
    width: 30.5px;
  }
}
.style1 {
  .special-list .row-item {
    span {
      height: 90px;
      line-height: 90px;
    }
  }
  .special-list .row-item:nth-child(1) {
    span {
      border-top-right-radius: 10px;
    }
  }
  .special-list .row-item:nth-child(2) {
    span {
      border-bottom-right-radius: 10px;
    }
  }
}
.style2 {
  .special-list .row-item:nth-child(1) {
    span {
      height: 70px;
      line-height: 70px;
      border-top-right-radius: 10px;
    }
  }
  .special-list .row-item:nth-child(2) {
    span {
      height: 40px;
      line-height: 40px;
    }
  }
  .special-list .row-item:nth-child(3) {
    span {
      height: 70px;
      line-height: 70px;
      border-bottom-right-radius: 10px;
    }
  }
}

.status-white {
  color: #666;
  background: #fff;
}
.status-yellow {
  color: #fff;
  background: #cece1d;
}
.status-green {
  color: #fff;
  background: var(--el-color-success);
}
.status-red {
  color: #fff;
  background: var(--el-color-danger);
}
.status-orange {
  color: #fff;
  background: var(--el-color-warning);
}
.status-blue {
  color: #fff;
  background: var(--el-color-primary);
}
.row-item span.status-hide {
  background: #0d0f20;
  color: #0d0f20;
  border: none;
}
.row-item span.status-charge {
  border-bottom: 10px solid var(--el-color-primary);
}
.el-select-dropdown__item {
  font-size: 22px !important;
}

.device-status {
  font-style: normal;
  color: var(--el-color-primary);
}

.cycle-box {
  transform: scale(1.5);
  margin-left: 740px;
}
</style>
